<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <title>ZwAI 全功能可视化测试</title>
    <style>
        body {
            font-family: sans-serif;
            margin: 0;
        }

        header {
            background: #222;
            color: #fff;
            padding: 10px;
            display: flex;
            justify-content: space-between;
        }

        header h1 {
            margin: 0;
            font-size: 20px;
        }

        nav {
            background: #eee;
            padding: 8px;
        }

        nav button {
            margin-right: 6px;
            padding: 6px 12px;
        }

        main {
            padding: 20px;
        }

        .section {
            display: none;
            margin-bottom: 40px;
        }

        .section.active {
            display: block;
        }

        form input,
        form textarea,
        form select {
            display: block;
            width: 300px;
            margin: 6px 0;
            padding: 6px;
        }

        form button {
            padding: 6px 12px;
        }

        .card {
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 10px;
            margin: 10px 0;
        }

        .badge {
            display: inline-block;
            background: #007bff;
            color: #fff;
            padding: 2px 6px;
            border-radius: 3px;
            margin-right: 4px;
            font-size: 12px;
        }

        .actions {
            margin-top: 8px;
        }

        .actions button {
            margin-right: 6px;
        }

        pre {
            background: #f4f4f4;
            padding: 10px;
            max-height: 150px;
            overflow: auto;
        }

        .comments {
            margin: 10px 0;
        }

        .comment {
            border-bottom: 1px solid #ddd;
            padding: 6px 0;
        }

        .reply {
            margin-left: 20px;
            border-left: 2px solid #ddd;
            padding-left: 10px;
        }
    </style>
</head>

<body>
    <header>
        <h1>ZwAI 全功能测试面板</h1>
        <div id="user-display">未登录</div>
    </header>
    <nav>
        <button onclick="show('register')">注册</button>
        <button onclick="show('login')">登录</button>
        <button onclick="show('me')">我的信息</button>
        <button onclick="show('invited')">我的邀请</button>
        <button onclick="show('followers')">粉丝列表</button>
        <button onclick="show('following')">关注列表</button>
        <button onclick="show('postArticle')">发表文章</button>
        <button onclick="show('myArticles')">我的文章</button>
        <button onclick="show('public')">公开文章</button>
        <button onclick="show('feed')">订阅文章</button>
        <button onclick="show('liked')">点赞文章</button>
        <button onclick="show('pending')">待审文章</button>
        <button onclick="show('comments')">评论管理</button>
        <button onclick="show('followUser')">关注/取关</button>
    </nav>
    <main>
        <section id="register" class="section">
            <h2>注册</h2>
            <form onsubmit="doRegister(event)">
                <input id="reg_account" placeholder="账号" required />
                <input id="reg_username" placeholder="用户名" required />
                <input id="reg_password" type="password" placeholder="密码" required />
                <input id="reg_invite" placeholder="邀请码(可选)" />
                <button type="submit">注册</button>
            </form>
            <pre id="reg_out"></pre>
        </section>
        <section id="login" class="section">
            <h2>登录</h2>
            <form onsubmit="doLogin(event)">
                <input id="login_account" placeholder="账号" required />
                <input id="login_password" type="password" placeholder="密码" required />
                <button type="submit">登录</button>
            </form>
            <pre id="login_out"></pre>
        </section>
        <section id="me" class="section">
            <h2>我的信息</h2>
            <button onclick="loadMe()">刷新</button>
            <pre id="me_out"></pre>
        </section>
        <section id="invited" class="section">
            <h2>我的邀请</h2>
            <button onclick="loadInvited()">刷新</button>
            <pre id="invited_out"></pre>
        </section>
        <section id="followers" class="section">
            <h2>粉丝列表</h2>
            <button onclick="loadFollowers()">刷新</button>
            <pre id="followers_out"></pre>
        </section>
        <section id="following" class="section">
            <h2>关注列表</h2>
            <button onclick="loadFollowing()">刷新</button>
            <pre id="following_out"></pre>
        </section>
        <section id="postArticle" class="section">
            <h2>发表文章</h2>
            <form onsubmit="doPostArticle(event)">
                <input id="art_title" placeholder="标题" required />
                <input id="art_desc" placeholder="描述" required />
                <textarea id="art_content" rows="4" placeholder="内容" required></textarea>
                <input id="art_tags" placeholder="标签,逗号分隔" />
                <select id="art_visibility">
                    <option value="public">public</option>
                    <option value="followers">followers</option>
                    <option value="private">private</option>
                </select>
                <button type="submit">提交</button>
            </form>
            <pre id="postArticle_out"></pre>
        </section>
        <section id="myArticles" class="section">
            <h2>我的文章</h2>
            <button onclick="loadMyArticles()">刷新</button>
            <div id="myArticles_list"></div>
        </section>
        <section id="public" class="section">
            <h2>公开文章</h2>
            <button onclick="loadPublic()">刷新</button>
            <div id="public_list"></div>
        </section>
        <section id="feed" class="section">
            <h2>订阅文章</h2>
            <button onclick="loadFeed()">刷新</button>
            <div id="feed_list"></div>
        </section>
        <section id="liked" class="section">
            <h2>我的点赞</h2>
            <button onclick="loadLiked()">刷新</button>
            <div id="liked_list"></div>
        </section>
        <section id="pending" class="section">
            <h2>待审文章</h2>
            <button onclick="loadPending()">刷新</button>
            <div id="pending_list"></div>
        </section>
        <section id="comments" class="section">
            <h2>评论管理</h2>
            <input id="comm_articleId" placeholder="文章ID" />
            <button onclick="gotoComments(comm_articleId.value)">加载评论</button>
            <div id="comments_list" class="comments"></div>
            <h3>新增评论/回复</h3>
            <form onsubmit="doPostComment(event)">
                <input id="comm_articleId2" placeholder="文章ID" required />
                <input id="comm_parentId" placeholder="父评论ID(可选)" />
                <textarea id="comm_content" rows="2" placeholder="内容" required></textarea>
                <button type="submit">提交</button>
            </form>
            <pre id="comm_out"></pre>
        </section>
        <section id="followUser" class="section">
            <h2>关注/取消关注</h2>
            <input id="follow_authorId" placeholder="作者ID" />
            <button onclick="doFollow()">操作</button>
            <pre id="follow_out"></pre>
        </section>
    </main>
    <script>
        const API = 'http://localhost:8080'; // 替换为你的API地址
        let token = '';
        function show(id) {
            document.querySelectorAll('.section').forEach(s => s.classList.remove('active'));
            document.getElementById(id)?.classList.add('active');
        }
        const userDisplay = document.getElementById('user-display');

        async function doRegister(e) { e.preventDefault(); const r = await fetch(API + '/register', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ account: reg_account.value, username: reg_username.value, password: reg_password.value, inviteCode: reg_invite.value || '' }) }); reg_out.textContent = JSON.stringify(await r.json(), null, 2); }
        async function doLogin(e) { e.preventDefault(); const r = await fetch(API + '/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ account: login_account.value, password: login_password.value }) }); const d = await r.json(); login_out.textContent = JSON.stringify(d, null, 2); if (d.code === 0) { token = d.data.token; userDisplay.textContent = '已登录：' + login_account.value; show('public'); } }
        async function loadMe() { const r = await fetch(API + '/me', { headers: { Authorization: 'Bearer ' + token } }); me_out.textContent = JSON.stringify((await r.json()).data, null, 2); }
        async function loadInvited() { const r = await fetch(API + '/me/invited', { headers: { Authorization: 'Bearer ' + token } }); invited_out.textContent = JSON.stringify((await r.json()).data, null, 2); }
        async function loadFollowers() { const r = await fetch(API + '/me/followers', { headers: { Authorization: 'Bearer ' + token } }); followers_out.textContent = JSON.stringify((await r.json()).data, null, 2); }
        async function loadFollowing() { const r = await fetch(API + '/me/following', { headers: { Authorization: 'Bearer ' + token } }); following_out.textContent = JSON.stringify((await r.json()).data, null, 2); }
        async function doPostArticle(e) { e.preventDefault(); const r = await fetch(API + '/articles', { method: 'POST', headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + token }, body: JSON.stringify({ title: art_title.value, description: art_desc.value, content: art_content.value, tags: art_tags.value.split(',').map(s => s.trim()), visibility: art_visibility.value }) }); postArticle_out.textContent = JSON.stringify(await r.json(), null, 2); }
        async function loadMyArticles() { const r = await fetch(API + '/me/articles', { headers: { Authorization: 'Bearer ' + token } }); const list = (await r.json()).data || []; myArticles_list.innerHTML = ''; list.forEach(a => { const c = document.createElement('div'); c.className = 'card'; c.innerHTML = `<h3>${a.title}</h3><p>状态：${a.status}${a.status === 'rejected' ? ` | 拒绝原因：${a.rejectionReason}` : ''}</p><p>${a.description}</p><div><select id="vis_${a.id}"><option value="public"${a.visibility === 'public' ? ' selected' : ''}>public</option><option value="followers"${a.visibility === 'followers' ? ' selected' : ''}>followers</option><option value="private"${a.visibility === 'private' ? ' selected' : ''}>private</option></select><button onclick="updateVis('${a.id}')">更新可见性</button></div>`; myArticles_list.appendChild(c); }); }
        async function updateVis(id) { const v = document.getElementById('vis_' + id).value; const r = await fetch(API + '/articles/visibility/' + id, { method: 'PUT', headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + token }, body: JSON.stringify({ visibility: v }) }); alert(JSON.stringify(await r.json(), null, 2)); loadMyArticles(); }
        async function renderList(u, cont, opts) { const r = await fetch(API + u, opts || {}); const list = (await r.json()).data || []; const d = document.getElementById(cont); d.innerHTML = ''; list.forEach(a => { const c = document.createElement('div'); c.className = 'card'; const t = a.tags ? a.tags.map(tt => `<span class="badge">${tt}</span>`).join('') : ''; c.innerHTML = `<h3>${a.title}</h3><p>${a.description}</p><div>${t}</div><p>👍${a.likes}|👁️${a.views}</p><div class="actions"><button onclick="like('${a.id}')">👍</button><button onclick="followAuthor('${a.authorId}')">关注作者</button><button onclick="gotoComments('${a.id}')">评论</button></div>`; d.appendChild(c); }); }
        function loadPublic() { renderList('/articles/public', 'public_list'); }
        function loadFeed() { renderList('/articles/feed', 'feed_list', { headers: { Authorization: 'Bearer ' + token } }); }
        function loadLiked() { renderList('/articles/liked', 'liked_list', { headers: { Authorization: 'Bearer ' + token } }); }
        function loadPending() { fetch(API + '/admin/articles/pending', { headers: { Authorization: 'Bearer ' + token } }).then(res => res.json()).then(data => { const list = data.data || []; pending_list.innerHTML = ''; list.forEach(a => { const c = document.createElement('div'); c.className = 'card'; const t = a.tags ? a.tags.map(tt => `<span class="badge">${tt}</span>`).join('') : ''; c.innerHTML = `<h3>${a.title}</h3><p>${a.description}</p><div>${t}</div><div class="actions"><button onclick="approveArticle('${a.id}')">通过</button><button onclick="rejectArticlePrompt('${a.id}')">拒绝</button></div>`; pending_list.appendChild(c); }); }); }
        async function approveArticle(id) { const r = await fetch(API + '/articles/approve/' + id, { method: 'POST', headers: { Authorization: 'Bearer ' + token } }); alert(JSON.stringify(await r.json(), null, 2)); loadPending(); }
        function rejectArticlePrompt(id) { const reason = prompt('请输入拒绝原因'); if (!reason) return; fetch(API + '/articles/reject/' + id, { method: 'POST', headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + token }, body: JSON.stringify({ reason }) }).then(res => res.json()).then(data => { alert(JSON.stringify(data, null, 2)); loadPending(); }); }
        function like(id) { fetch(API + '/articles/like/' + id, { method: 'POST', headers: { Authorization: 'Bearer ' + token } }); }
        async function followAuthor(id) { await fetch(API + '/users/' + id + '/follow', { method: 'POST', headers: { Authorization: 'Bearer ' + token } }); }
        function gotoComments(id) { show('comments'); comm_articleId.value = id; loadComments(); }
        async function loadComments() { const id = comm_articleId.value; const r = await fetch(API + '/articles/comments/' + id); const list = (await r.json()).data || []; comments_list.innerHTML = ''; list.forEach(c => { const dv = document.createElement('div'); dv.className = 'comment'; dv.innerHTML = `<b>${c.authorId}</b>: ${c.content}`; c.replies.forEach(rp => { const rv = document.createElement('div'); rv.className = 'reply'; rv.innerHTML = `<i>${rp.authorId}</i>: ${rp.content}`; dv.appendChild(rv); }); comments_list.appendChild(dv); }); }
        async function doPostComment(e) { e.preventDefault(); const r = await fetch(API + '/articles/comments/' + comm_articleId2.value, { method: 'POST', headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + token }, body: JSON.stringify({ content: comm_content.value, parentId: comm_parentId.value || undefined }) }); comm_out.textContent = JSON.stringify(await r.json(), null, 2); }
        async function doFollow() { const id = follow_authorId.value; const r = await fetch(API + '/users/' + id + '/follow', { method: 'POST', headers: { Authorization: 'Bearer ' + token } }); follow_out.textContent = JSON.stringify(await r.json(), null, 2); }
        show('register');
    </script>
</body>

</html>